import React from 'react';

const PromptInput = ({
    value,
    onChange,
    maxLength = 800,
    placeholder = '输入你的提示词',
    required = true,
}) => {
    return (
        <div
            className={`prompt-input-container ${
                value.length > maxLength ? 'prompt-input-container-error' : ''
            }`}
        >
            <textarea
                value={value}
                onChange={onChange}
                placeholder={placeholder}
                required={required}
                className="prompt-input"
            />
            <div
                className="prompt-input-counter-num"
                style={{
                    position: 'absolute',
                    right: 20,
                    bottom: 10,
                    color:
                        value.length == 0
                            ? '#fff'
                            : value.length > maxLength
                            ? 'red'
                            : '#fff',
                }}
            >
                <div style={{ fontFamily: 'Helvetica Neue' }}>
                    {value.length || 0}
                    <span style={{ color: '#686B86' }}>/{maxLength}</span>
                </div>
            </div>
        </div>
    );
};

export default PromptInput;
